/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  ScrollView,
  TouchableHighlight,
  ToastAndroid,
  Alert,
} from 'react-native';
import {
  Table,
  TableWrapper,
  Row,
  Rows,
  Col,
  Cols,
  Cell,
} from 'react-native-table-component';
import {ECharts} from 'react-native-echarts-wrapper';
import {ActivityIndicator} from '@ant-design/react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import DatePicker from 'react-native-datepicker';
import moment from 'moment';
import Page from '../components/page';
import {cwGet} from '../utils/http';
export default class CoalInject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [],
      tableHead: [
        '时间',
        '喷煤目标',
        '喷煤累计',
        '喷煤速率',
        '喷煤建议',
        '喷煤阀位',
        '炉温',
        '炉温上限',
        '炉温下限',
          '料速' //05-04
      ],
      widthArr: [100, 100, 100, 100, 100, 100, 100, 100, 100,100], //05-04加100
      totalPage: 0,
      totalCount: 0,
      currentTab: 'now',
      animating: false,
      animating1: false,
      hasPage: 'h-16',
      currentPage : 'hour16',
      currentAllPage:'',
      childName: '',
      tagName: '',
      title: '',
      leftTitle: '',
      rightTitle: '',
      deviceList: [],
      currentDevice: '',
      currentDeviceForList: '',
      currentChild: '',
      currentTag: '',
      showList: [],
      legends: [],
      saveData: {},
      series: [],
      childTag: [],
      tagValues: [],
      xAxis: [],
      yAxis: [],
      activeSections: [],
      currentTime: '',
      startTime: moment()
        .subtract(16, 'hours')
        .format('YYYY-MM-DD HH:mm:ss'),
      endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      page: null,
      chartStartTime: moment()
        .subtract(16, 'hours')
        .format('YYYY-MM-DD HH:mm:ss'),
      chartEndTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      listTags: '',
      pageIndex: 1,
      pageNum: 0,
      tabList: [{label: '曲线图', tag: 'now'}, {label: '全部数据', tag: 'all'}],
      timeArea: [
        {label: '2小时', key: 'hour2'},
        {label: '4小时', key: 'hour4'},
        {label: '8小时', key: 'hour8'},
        {label: '16小时', key: 'hour16'},
        {label: '24小时', key: 'day1'},
        {label: '3天', key: 'day3'},
        // {label: '一周', key: 'day7'},
        // {label: '一月', key: 'month1'},
      ],
      timeArea1: [
        {label: '1小时', key: 'hour1'},
        {label: '6小时', key: 'hour6'},
        {label: '12小时', key: 'hour12'},
        {label: '24小时', key: 'day1'},
        {label: '3天', key: 'day3'},
        // {label: '一周', key: 'day7'},
        // {label: '一月', key: 'month1'},
      ],
      childs: [],
      tags: [],
      tagsDataList: [],
    };
    this.getData = this.getData.bind(this);
  }

  onTabClick(e) {
    let title = '';
    if (e === 'now') {
      title = this.state.leftTitle;
    } else {
      title = this.state.rightTitle;
    }
    this.setState({
      currentTab: e,
    });
  }

  onTimeChange(key, type) {
    console.log(type);
    let startTime = '';
    let endTime = '';
    let hasPage = '';


    if(this.state.currentTab === 'all'){
      this.setState({
        xAxis: [],
        yAxis: [],
        series: [],
        currentAllPage:key,
      });
    }else{
      this.setState({
        xAxis: [],
        yAxis: [],
        series: [],
        currentPage:key,
      });
    }

    const now = moment();
    endTime = now.format('YYYY-MM-DD HH:mm:ss');
    switch (key) {
      case 'hour1':
        startTime = now.subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-1';
        break;
      case 'hour2':
        startTime = now.subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-2';
        break;
      case 'hour4':
        startTime = now.subtract(4, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-4';
        break;
      case 'hour6':
        startTime = now.subtract(6, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-6';
        break;
      case 'hour8':
        startTime = now.subtract(8, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-8';
        break;
      case 'hour12':
        startTime = now.subtract(12, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-12';
        break;
      case 'hour16':
        startTime = now.subtract(16, 'hours').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'h-16';
        break;
      case 'day1':
        startTime = now.subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'd-1';
        break;
      case 'day3':
        startTime = now.subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
        hasPage = 'd-3';
        break;
      case 'day7':
        startTime = now.subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
        break;
      case 'month1':
        startTime = now.subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
        break;
    }
    if (type) {
      this.setState(
        {
          chartStartTime: startTime,
          chartEndTime: endTime,
          hasPage,
        },
        () => {
          this.getData();
        },
      );
    } else {
      this.setState(
        {
          startTime,
          endTime,
          hasPage,
        },
        () => {
          this.getData();
        },
      );
    }
  }

  getData() {
    if (this.state.currentTab == 'all') {
      let {pageIndex, startTime, endTime, currentDeviceForList} = this.state;
      console.log(currentDeviceForList, startTime, endTime);
      this.setState({
        animating1: true,
      });
      cwGet(
        'Others/GetModelPMs?id=' +
          currentDeviceForList +
          '&start=' +
          encodeURIComponent(startTime) +
          '&end=' +
          encodeURIComponent(endTime) +
          '&pageIndex=' +
          pageIndex +
          '&pageSize=' +
          20,
      )
        .then(res => {
          console.log(res);
          this.setState({
            animating1: false,
          });
          this.setState({
            totalCount: res.totalCount,
            totalPage: Math.ceil(res.totalCount / 20.0),
          });
          if (res && res.data.length != 0) {
            let res_s = [];
            res.data.forEach((rowData, index) => {
              res_s.push(
                <Row
                  key={index}
                  data={[
                    rowData.timestamp,
                    rowData.pmmubiao,
                    rowData.pmleiji,
                    rowData.pmsulv,
                    rowData.pmjianyi,
                    rowData.pmfawei,
                    rowData.luwen,
                    rowData.luwenup,
                    rowData.luwendown
                      ,rowData.liaosu //05-04
                  ]}
                  widthArr={this.state.widthArr}
                  style={[
                    styles.row,
                    index % 2 == 0 && {backgroundColor: '#DDCCF7'},
                  ]}
                />,
              );
            });
            this.setState(
              {
                tableData: res_s,
              },
              () => {
                this.setState({
                  animating: false,
                });
              },
            );
          } else {
            Alert.alert('提示', '数据为空');
            this.setState({
              animating: false,
            });
          }
        })
        .finally(() => {});
    } else {
      let {chartStartTime, chartEndTime, currentDeviceForList} = this.state;
      this.setState({
        animating: true,
      });
      cwGet(
        'Others/GetModelPMs?id=' +
          currentDeviceForList +
          '&start=' +
          encodeURIComponent(chartStartTime) +
          '&end=' +
          encodeURIComponent(chartEndTime) +
          '&pageIndex=' +
          1 +
          '&pageSize=' +
          2000,
      ).then(res => {
        const data = res.data;
        if (data.length > 0) {
          //x轴数据
          var timeData = data.map(item => {
              //item.timestamp.substr(5,item.timestamp.length-5);
              //item.timestamp
              return item.timestamp;
          });
          let legendData = [
            '喷煤目标',
            '喷煤累计',
            '喷煤速率',
            '喷煤建议',
            '喷煤阀位',
            '炉温',
            '炉温上限',
            '炉温下限',
             '料速'//05-04
          ];
          var allValues = [];
          allValues.push({
            name: '喷煤目标',
            lowAxis: 0,
            highAxis: 40,
            value: data.map(e => e['pmmubiao']),
          });
          allValues.push({
            name: '喷煤累计',
            lowAxis: 0,
            highAxis: 40,
            value: data.map(e => e['pmleiji']),
          });
          allValues.push({
            name: '喷煤速率',
            lowAxis: 0,
            highAxis: 40,
            value: data.map(e => e['pmsulv']),
          });
          allValues.push({
            name: '喷煤建议',
            lowAxis: 0,
            highAxis: 40,
            value: data.map(e => e['pmjianyi']),
          });
          allValues.push({
            name: '喷煤阀位',
            lowAxis: 0,
            highAxis: 100,
            value: data.map(e => e['pmfawei']),
          });
          allValues.push({
            name: '炉温',
            lowAxis: 0,
            highAxis: 1,//3gai1
            value: data.map(e => e['luwen']),
          });
          allValues.push({
            name: '炉温上限',
            lowAxis: 0,
            highAxis: 1,//3gai1
            value: data.map(e => e['luwenup']),
          });
          allValues.push({
            name: '炉温下限',
            lowAxis: 0,
            highAxis: 1,//3gai1
            value: data.map(e => e['luwendown']),
          });
          allValues.push({//2020-10-31
                name: '料速',
                lowAxis: 100,
                highAxis: 350,
                value: data.map(e => e['liaosu']),
            });
          var seriesData = [];
          var i = 0;
          allValues.map(item => {
            seriesData.push({
              symbol: 'none', //去掉圆点
              name: item.name,
              type: 'line',
              data: item.value,
              yAxisIndex: i,
              animation: false,
              lineStyle: {
                width: 1,
              },
            });
            ++i;
          });
          const optionDatas = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                animation: false,
                label: {
                  backgroundColor: '#505765',
                },
              },
              confine: true,
            },

            legend: {
              data: legendData,
              padding:[0,2],
              itemGap:5,
              itemHeight:10,
              textStyle: {
                fontSize: 12,
              }
            }
              ,/*dataZoom: {
                  show: false,
                  start: 0,
                  end: 100000,
              },*/
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLine: {onZero: false},
                axisLabel:{
                  interval: 100000,
                  showMinLabel: true,
                  showMaxLabel: true,
                  textStyle: {
                    color: '#999',
                    fontSize: 10,
                  }
                },
                data: timeData,
              },
            ],
            yAxis: (function() {
              var yAxisData = [];
              var i = 0;
              var count = allValues.length;
              var avg = count / 2;
              var offset = -80;
              var position = 'left';
              allValues.map(item => {
                if (i == avg) {
                  offset = -40;
                  position = 'right';
                }
                offset += 40;
                yAxisData.push({
                  show: false,
                  name: item.name,
                  type: 'value',
                  max: parseInt(item.highAxis),
                  min: parseInt(item.lowAxis),
                  position: position,
                  offset: offset,
                });
                i++;
              });
              return yAxisData;
            })(),
            series: seriesData,
          };
          setTimeout(() => {
            this.setState({
              animating: false,
              series: seriesData,
            });
            this.Echart.setOption(optionDatas);
          }, 500);
        } else {
          this.setState({
            animating: false,
          });
          Alert.alert('提示', '无数据');
        }
      });
    }
  }

  show() {
    this.refs.bankName.show();
  }

  onRef = ref => {
    this.state.page = ref;
  };

  callBack(e) {
    this.setState(
      {
        pageIndex: e,
      },
      () => {
        this.getData();
      },
    );
  }
  defineList(rowData) {
    return <Text style={{padding: 10}}>{rowData.name}</Text>;
  }

  childList(rowData) {
    return <Text style={{padding: 10}}>{rowData.deviceItemName}</Text>;
  }

  tagList(rowData) {
    if (rowData.tag) {
      return <Text style={{padding: 10}}>{rowData.signNo}</Text>;
    } else {
      return <View />;
    }
  }

  preAndNext(type) {
    console.log(type);
    const {hasPage, chartStartTime, chartEndTime} = this.state;
    if (hasPage) {
      let s = null,
        e = null;
      switch (hasPage) {
        case 'h-2':
          if (type === '-') {
            s = moment(chartStartTime)
              .subtract(2, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
              .add(2, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
        case 'h-4':
          if (type === '-') {
            s = moment(chartStartTime)
              .subtract(4, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
              .add(4, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
        case 'h-8':
          if (type === '-') {
            s = moment(chartStartTime)
              .subtract(8, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
              .add(8, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
        case 'h-16':
          if (type === '-') {
            s = moment(chartStartTime)
              .subtract(16, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
              .add(16, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
        case 'd-1':
          if (type === '-') {
            s = moment(chartStartTime)
              .subtract(24, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
              .add(24, 'hours')
              .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
        case 'd-3':
          if (type === '-') {
            s = moment(chartStartTime)
                .subtract(72, 'hours')
                .format('YYYY-MM-DD HH:mm:ss');
            e = chartStartTime;
          } else {
            e = moment(chartEndTime)
                .add(72, 'hours')
                .format('YYYY-MM-DD HH:mm:ss');
            s = chartEndTime;
          }
          break;
      }
      this.setState(
        {
          chartStartTime: s,
          chartEndTime: e,
        },
        () => {
          this.getData();
        },
      );
    }
  }

  componentDidMount() {
    this.setState(
      {
        title: global.nowDevice.name,
        rightTitle: global.nowDevice.name,
        currentChild: '',
        childName: '',
        currentTag: '',
        tagName: '',
        currentDeviceForList: global.nowDevice.name[0],
      },
      () => {
        this.getData();
      },
    );
  }
  render() {
    const {
      legends,
      series,
      xAxis,
      yAxis,
      currentTab,
      title,
      hasPage,
    } = this.state;
    const deviceWidth = Dimensions.get('window').width;
    return (//喷煤趋势==>智能温控趋势
      <ScrollView style={{height: '100%'}}>
        <View
          style={{
            marginLeft: 20,
            flexDirection: 'row',
            marginTop: 5,
            marginBottom: 5,
            alignItems: 'center',
          }}>
          <FontAwesome
            style={{backgroundColor: 'transparent', marginRight: 20}}
            name="bars"
            color="grey"
            size={16}
          />
          <Text style={{fontSize: 16}}>智能温控趋势</Text>
          {title.length > 0 ? (
            <FontAwesome
              style={{
                backgroundColor: 'transparent',
                marginRight: 10,
                marginLeft: 10,
              }}
              name="chevron-left"
              color="grey"
              size={16}
            />
          ) : (
            <View />
          )}
          <Text>{title}</Text>
        </View>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          {this.state.tabList.map(item => {
            return (
              <TouchableHighlight
                underlayColor={'#fff'}
                key={item.id}
                style={[
                  {
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'center',
                    paddingTop: 4,
                    paddingBottom: 4,
                  },
                ]}
                onPress={this.onTabClick.bind(this, item.tag)}>
                <View
                  style={[
                    {width: '85%', backgroundColor: '#D5D6D8'},
                    currentTab == item.tag ? NowDataStyles.curretnTab : '',
                  ]}>
                  <Text
                    style={{
                      fontSize: 16,
                      textAlign: 'center',
                      color: '#fff',
                    }}>
                    {item.label}
                  </Text>
                </View>
              </TouchableHighlight>
            );
          })}
        </View>
        <View style={{display: currentTab === 'now' ? 'flex' : 'none'}}>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {this.state.timeArea.map(item => {
              return (
                <TouchableHighlight
                  underlayColor="#dcdcdc"
                  onPress={this.onTimeChange.bind(this, item.key, true)}>
                  <Text
                    style={[{
                      marginLeft: 10,
                      fontSize: 12,
                      marginRight: 5,
                      padding: 4,
                    },
                      this.state.currentPage === item.key && {color:'#2f1edf'}]}>
                    {item.label}
                  </Text>
                </TouchableHighlight>
              );
            })}
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              paddingLeft: 16,
              paddingRight: 10,
              justifyContent: 'space-between',
            }}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text>时间：</Text>
              <DatePicker
                style={{
                  width: Dimensions.get('window').width / 3,
                  fontSize: 12,
                }}
                date={this.state.chartStartTime}
                mode="datetime"
                placeholder="选择日期"
                format="YYYY-MM-DD HH:mm"
                showIcon={false}
                is24Hour={true}
                confirmBtnText="确定"
                cancelBtnText="取消"
                customStyles={{
                  dateInput: {
                    height: 30,
                    borderColor: '#E2B0B0',
                    borderRadius: 3,
                    overflow: 'hidden',
                  },
                }}
                onDateChange={date => {
                  this.setState({chartStartTime: date});
                }}
              />
              <View style={{flexDirection: 'row', height: 30}}>
                <Text style={{marginLeft: 3, marginRight: 3, marginTop: 5}}>
                  -
                </Text>
              </View>
              <DatePicker
                style={{
                  width: Dimensions.get('window').width / 3,
                  fontSize: 12,
                }}
                date={this.state.chartEndTime}
                mode="datetime"
                placeholder="选择日期"
                format="YYYY-MM-DD HH:mm"
                showIcon={false}
                is24Hour={true}
                confirmBtnText="确定"
                cancelBtnText="取消"
                customStyles={{
                  dateInput: {
                    height: 30,
                    borderColor: '#E2B0B0',
                    borderRadius: 3,
                    overflow: 'hidden',
                  },
                }}
                onDateChange={date => {
                  this.setState({chartEndTime: date});
                }}
              />
            </View>
            <TouchableHighlight
              underlayColor="#dcdcdc"
              style={{
                height: 30,
                flexDirection: 'row',
                padding: 5,
                borderRadius: 3,
                alignItems: 'center',
                backgroundColor: '#E8B5E1',
              }}
              onPress={this.getData.bind(this)}>
              <Text>查询</Text>
            </TouchableHighlight>
          </View>
          {/* <ScrollView horizontal>
          </ScrollView> */}
          <View
            style={{
              height: Dimensions.get('window').height - 240,
              width: '100%',
            }}>
            <ECharts
              ref={ref => {
                this.Echart = ref;
              }}
            />
          </View>

          <ActivityIndicator
            animating={this.state.animating}
            toast
            size="large"
            text="加载中..."
          />
          {hasPage != '' &&this.state.series.length>0  && (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingLeft: 16,
                paddingRight: 16,
              }}>
              <TouchableHighlight
                style={{padding: 5}}
                underlayColor="#dcdcdc"
                onPress={this.preAndNext.bind(this, '-')}>
                <Text>上一页</Text>
              </TouchableHighlight>
              <TouchableHighlight
                style={{padding: 5}}
                underlayColor="#dcdcdc"
                onPress={this.preAndNext.bind(this, '+')}>
                <Text>下一页</Text>
              </TouchableHighlight>
            </View>
          )}
        </View>
        <View style={{display: currentTab === 'all' ? 'flex' : 'none'}}>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {this.state.timeArea1.map(item => {
              return (
                <TouchableHighlight
                  underlayColor="#dcdcdc"
                  onPress={this.onTimeChange.bind(this, item.key, false)}>
                  <Text
                    style={[{
                      marginLeft: 10,
                      fontSize: 12,
                      marginRight: 5,
                      padding: 4,
                    },
                      this.state.currentAllPage === item.key && {color:'#2f1edf'}]}>
                    {item.label}
                  </Text>
                </TouchableHighlight>
              );
            })}
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              paddingLeft: 16,
              paddingRight: 10,
              justifyContent: 'space-between',
            }}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text>时间：</Text>
              <DatePicker
                style={{
                  width: Dimensions.get('window').width / 3,
                  fontSize: 12,
                }}
                date={this.state.startTime}
                mode="datetime"
                placeholder="选择日期"
                format="YYYY-MM-DD HH:mm"
                showIcon={false}
                is24Hour={true}
                confirmBtnText="确定"
                cancelBtnText="取消"
                customStyles={{
                  dateInput: {
                    height: 30,
                    borderColor: '#E2B0B0',
                    borderRadius: 3,
                    overflow: 'hidden',
                  },
                }}
                onDateChange={date => {
                  this.setState({startTime: date});
                }}
              />
              <View style={{flexDirection: 'row', height: 30}}>
                <Text style={{marginLeft: 3, marginRight: 3, marginTop: 5}}>
                  -
                </Text>
              </View>
              <DatePicker
                style={{
                  width: Dimensions.get('window').width / 3,
                  fontSize: 12,
                }}
                date={this.state.endTime}
                mode="datetime"
                placeholder="选择日期"
                format="YYYY-MM-DD HH:mm"
                showIcon={false}
                is24Hour={true}
                confirmBtnText="确定"
                cancelBtnText="取消"
                customStyles={{
                  dateInput: {
                    height: 30,
                    borderColor: '#E2B0B0',
                    borderRadius: 3,
                    overflow: 'hidden',
                  },
                }}
                onDateChange={date => {
                  this.setState({endTime: date});
                }}
              />
            </View>
            <TouchableHighlight
              underlayColor="#dcdcdc"
              style={{
                height: 30,
                flexDirection: 'row',
                padding: 5,
                borderRadius: 3,
                alignItems: 'center',
                backgroundColor: '#E8B5E1',
              }}
              onPress={this.getData.bind(this)}>
              <Text>查询</Text>
            </TouchableHighlight>
          </View>

          <ActivityIndicator
            style={{marginTop: 100}}
            animating={this.state.animating1}
            toast
            size="large"
            text="加载中..."
          />
          <ScrollView
            horizontal={true}
            style={{
              height: Dimensions.get('window').height - 330,
              marginHorizontal: 5,
            }}>
            {this.state.tableData.length > 0 ? (
              <View>
                <Table borderStyle={{borderWidth: 1, borderColor: '#808080'}}>
                  <Row
                    data={this.state.tableHead}
                    widthArr={this.state.widthArr}
                    style={styles.header}
                    textStyle={styles.text}
                  />
                </Table>
                <ScrollView
                  horizontal={false}
                  style={(NowDataStyles.dataWrapper, {})}>
                  <Table
                    borderStyle={{borderWidth: 0.5, borderColor: '#808080'}}>
                    {this.state.tableData}
                  </Table>
                </ScrollView>
              </View>
            ) : (
              <></>
            )}
          </ScrollView>
          {this.state.totalPage != 0 ? (
            <View>
              <View style={{paddingLeft: 10, paddingRight: 10}}>
                <Text>共{this.state.totalCount}条</Text>
              </View>
              <Page
                PageAllNum={this.state.totalPage}
                onRef={this.onRef}
                activePage={1}
                callBack={CB => this.callBack(CB)}
              />
            </View>
          ) : (
            <View />
          )}
        </View>
      </ScrollView>
    );
  }
}

const NowDataStyles = StyleSheet.create({
  nextTab: {
    borderWidth: 1,
    borderColor: '#E8C1C1',
    backgroundColor: '#F4F4F4',
    color: '#B2B2B2',
  },
  curretnTab: {
    backgroundColor: '#638AD0',
  },
  pageBtn: {
    padding: 4,
  },
});
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingHorizontal: 5,
  },
  header: {
    height: 20,
    borderTopWidth: 1,
    backgroundColor: '#BBCCF7',
    borderBottomWidth: 1,
  },
  text: {textAlign: 'center', fontSize: 12},
  dataWrapper: {marginTop: -1},
  row: {backgroundColor: '#DDEBF7'},
  wrapper: {flexDirection: 'row'},
});
